import { title } from "process";
import { Component, ReactNode } from "react";

interface iProps{
    title: string
    a:number
    is: string | number | boolean
}

//类组件的传参手段
class Header extends Component{
    // 2. 接收父组件传递过来的数据
    // 父子传参叫单向数据流
    props = {
        name: '',
        msg:' '
    }

    render(): ReactNode {
        return <header>
            {/* 3. 使用 */}
            <h1>{this.props.name}</h1>
            <h2>{this.props.msg}</h2>
        </header>
    }
}

//函数组件的传参手段
function Content(props:iProps){
    return <main>
        <h1> 头部组件 ------ {props.title} ---{props.is ? '1' : '2'}</h1>
    </main>
}


export default class App extends Component {
    /*
        状态变量的应用
        定义： state 是类组件中用来定义状态变量的关键字，所有的状态变量都要放在 state 里面
        修改： 必须要通过 this.setState 修改状态变量，否则没有效果
    */
    state = {
        title: '标题',
        is: false
    }

    render(): ReactNode {
        return<>
        {/* 1. 通过属性将参数传递到子组件 */}
        {/* 类组件的传参 */}
        <Header name = {'ahhhh'} msg = {this.state.title}></Header>


        <hr />


        <h1>父组件 --- {this.state.title}</h1>
        <button onClick={()=>{

            // 不能直接修改，不具备响应式
                    // this.state.title = '西瓜'

                    // setState 是 React 中唯一修改状态变量的方法
            this.setState({
                title: '标题修改了',
                a: 1000,
                is: true
            })
        }}>点击修改标题</button>


        <hr />

        {/* 父子传参的时候只要不是纯字符串都要加 {} */} 
        <Content title= {this.state.title} is= {this.state.is} a={10}></Content>
        </>
    }

}
